<template>
	<view class="register_box">
		<view class="register_container">
			<view class="register_home_png">
				<img src="../../static/tabbar/home_active.png" alt="" />
			</view>
			<view class="register_home_text">
				百科荣创公寓板块管理系统
			</view>
			<view class="register_home_tip">
				<view class="">
					账号登录
				</view>
				<view class="register_home_tip_boreder">

				</view>
			</view>
			<view class="register_home_form">
				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<input class="uni-input" name="input" placeholder="手机号:" v-model="userInfo.phone" />
					</view>
					<view class="uni-form-item uni-column">
						<input class="uni-input" name="input" placeholder="密码:" v-model="userInfo.password" />
					</view>
					<view class="uni-btn-v ">
						<button class="comit" form-type="submit" type="primary"
							style="background-color: rgb(37, 156, 255);">立即登录</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOpenId,
		wxLogin
	} from "../../api/request.js"
	export default {
		data() {
			return {
				userInfo: {
					phone: '',
					password: null
				},
				openId: null,
			}
		},
		onLoad() {
			this.getOpenIdMethod()
		},
		methods: {
			async getOpenIdMethod() {
				const that = this
				uni.login({
					provider: 'weixin',
					success: async function(loginRes) {
						// 获取登录凭证
						var code = loginRes.code;
						const accountInfo = uni.getAccountInfoSync();
						let data = await getOpenId({
							"appid": accountInfo.miniProgram.appId,
							"grant_type": "authorization_code",
							"js_code": code,
							"secret": "fcc82dc21f6e098e80302754ee2bfa34"
						})
						that.openId = data.data.openid
						console.log(data, 'data');
						uni.setStorage({
							key: "openId",
							data: data.data.openid
						})
					},
					fail: function(error) {
						console.error('登录失败', error);
					}
				});

			},
			async formSubmit() {
				const {
					password,
					phone
				} = this.userInfo
				let phoneRegex = /^1[3-9]\d{9}$/;

				if (!phoneRegex.test(phone)) {
					uni.showToast({
						icon: "none",
						title: "手机号不合格"
					})
					return
				}
				console.log(password.length, 'password');
				if (password.length > 5 && password.length < 12) {
					let data = await wxLogin({
						"openId": this.openId,
						"password": password,
						"phone": phone
					})
					console.log(data, 'datadatadatadata');
					uni.showToast({
						title: "登录成功",
						duration: 2000
					})
					uni.setStorage({
						key: "token",
						data: data.token
					})
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/index/index"
						})
					}, 2000)

					console.log(data);
				} else {
					uni.showToast({
						icon: "none",
						title: "密码不应小于6位或长于12位"
					})
					return
				}

			}
		}
	}
</script>

<style lang="less">
	.register_box {
		width: 100%;
		height: 100vh;

		.register_container {
			display: flex;
			flex-direction: column;
			width: 90%;
			margin: auto;
			align-items: center;
			height: 100%;

			.register_home_png {
				margin-bottom: 20px;

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.register_home_text {
				font-size: 50rpx;
				margin-bottom: 40px;
			}

			.register_home_tip {
				margin-bottom: 20px;
				color: rgb(148, 203, 253);
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 80rpx;
				font-size: 40rpx;

				.register_home_tip_boreder {
					width: 40rpx;
					display: inline-block;
					border: 4rpx solid rgb(148, 203, 253);
					margin: auto;
				}
			}

			.register_home_form {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;


				input {
					background-color: #DFE2E8;
					border-radius: 10rpx;
					padding: 36rpx 10px;
					margin-bottom: 40rpx;
				}

				.comit {
					width: 100%;
					padding: 18rpx 0px;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>